<template>
  <div class="about-view">
    <div class="header">
      <h1>关于子应用 A</h1>
      <p>这是子应用 A 的关于页面</p>
    </div>

    <div class="content">
      <el-card class="feature-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><Star /></el-icon>
            <span>特性介绍</span>
          </div>
        </template>
        <div class="features">
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>支持 Vue 3 Composition API</span>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>集成 Element Plus 组件库</span>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>TypeScript 类型安全</span>
          </div>
          <div class="feature-item">
            <el-icon class="feature-icon"><Check /></el-icon>
            <span>Vite 快速构建</span>
          </div>
        </div>
      </el-card>

      <el-card class="tech-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <el-icon><Setting /></el-icon>
            <span>技术栈</span>
          </div>
        </template>
        <div class="tech-stack">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="前端框架">Vue 3</el-descriptions-item>
            <el-descriptions-item label="UI 组件库">Element Plus</el-descriptions-item>
            <el-descriptions-item label="编程语言">TypeScript</el-descriptions-item>
            <el-descriptions-item label="构建工具">Vite 7</el-descriptions-item>
            <el-descriptions-item label="状态管理">Pinia</el-descriptions-item>
            <el-descriptions-item label="路由管理">Vue Router 4</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Star, Check, Setting } from '@element-plus/icons-vue'
import { onMounted } from 'vue'

// 组件挂载时的调试信息
onMounted(() => {
  console.log('>>> AboutView 组件已挂载 <<<')
  console.log('当前页面URL:', window.location.href)
  console.log('当前时间:', new Date().toISOString())
})
</script>

<style scoped>
.about-view {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #333;
  margin-bottom: 10px;
}

.header p {
  color: #666;
  font-size: 16px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.feature-card,
.tech-card {
  width: 100%;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.features {
  padding: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 16px;
}

.feature-item:last-child {
  margin-bottom: 0;
}

.feature-icon {
  color: #67c23a;
}

.tech-stack {
  padding: 20px;
}

@media (max-width: 768px) {
  .content {
    padding: 0 10px;
  }
}
</style>
